<template>
  <div class="listBox">
    <template v-if="list.length > 0">
      <div class="list" v-for="(item, index) in list" :key="index" @click="toEditPage(item.id)">
        <div class="line">
          <div class="line_l">{{ item.type_name}}</div>
          <div class="line_r">{{ item.status_name }}</div>
        </div>
        <div class="line">
          <div class="line_l">{{ item.settle_acct_bank_acct_no }}</div>
          <div class="line_r"></div>
        </div>
        <div class="line">
          <div class="tagBox">
            <div class="tag" v-if="item.is_area_dividend_default == 1">区域代理</div>
            <div class="tag" v-if="item.is_store_cashier_default == 1">门店</div>
            <div class="tag" v-if="item.is_supplier_default == 1">供应商</div>
            <div class="tag" v-if="item.is_branch_default == 1">分公司</div>
          </div>
          <div class="line_r">查看<i class="iconfont icon-icon_more"></i></div>
        </div>
      </div>
    </template>
    <van-empty image="search" description="暂无记录" v-if="list.length == 0" />
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  methods:{
    toEditPage(id){
      this.$router.push(this.fun.getUrl("hema_pay_edit", {}, { id }));
    }
  }
};
</script>
<style lang="scss" scoped>
.listBox {
  margin: 0.75rem;
  .list {
    padding: 0.75rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.35rem;
    margin-bottom: 0.5rem;
    .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      .tagBox {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .tag {
          padding: 0.15rem 0.3rem;
          box-sizing: border-box;
          border: 1px solid #ef5452;
          margin-right: 0.5rem;
          color: #ef5452;
          border-radius: 0.25rem;
        }
      }
      .icon-icon_more {
        font-size: 0.7rem;
        color: #ef5452;
      }
      .status {
        color: #ef5452;
      }
      .line_r {
        color: #ef5452;
      }
      .line_l {
        font-weight: 500;
      }
    }
    .line:last-child {
      margin-bottom: 0;
    }
  }
  .lsit:last-child {
    margin-bottom: 0;
  }
}
</style>
